css 的 transform 和 animation 区别

transform 对元素本身进行变形 animation 对元素的多个属性变形, 多个桢 transition 对元素的多个属性变形, 只要开始结束桢

transform

transform: scale(2, 0.5) // x轴缩放2倍，y轴缩放0.5倍
transform: rotate(0.5turn) // 顺时针旋转0.5圈
transform: rotate(140deg) // 顺时针旋转140度
transform: translate(120px, 160px) //  x轴平移120px,y轴平移160px
transform: skew(30deg,20deg) // x轴旋转30度,y轴旋转20度
transform: matrix(1, 2, 3, 4, 5, 6) // 6个值的矩阵（需要再详细）
transform: scale(0.5) translate(-100%, -100%); // x、y轴缩放0.5倍，再根据自身长宽向左向上translate移动100%（100%是由自身宽高决定的）

animation

animation: circle 2s steps(3, start) infinite;
@-webkit-keyframes circle {
    0% {
        background: red
    }
    50% {
        background: yellow
    }
    100% {
        background: blue
    }
}
step-start: 黄色与蓝色相互切换
step-end：红色与黄色相互切换

https://designmodo.com/demo/stepscss/pawprints.html

// ----

animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;
@keyframes slidein {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

transtion

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

animation steps

• 帧动画，我们不要平滑的移动效果，我们把每个步骤分段，没秒执行一段

  0.8 秒动 10 步

.hi {
    width: 50px;
    height: 72px;   // 矩形的宽高
    background-image: url("http://s.cdpn.io/79/sprite-steps.png");
    animation: play .8s steps(10) infinite;  // 分10步完成0到-500px完成并无限重复
}
@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

.s0 {
	left: 1.25rem;
	-webkit-animation: sMove 10s steps(10, start); // 1s 动1步，分10步
}

.ms0 {
	left: 2rem;
	-webkit-animation: sMove 1s  steps(10, start) infinite; // 1秒动 10 步
}

.ms10 {
	left: 2.3rem;
	-webkit-animation: sMove 100ms steps(10, start) infinite ; // 100ms 动 10 步
}

@-webkit-keyframes sMove {
	0% {
		background-position: -2.80rem 0;
	}
	100% {
		background-position: 0 0;
	}
}